<template>
  <div class="editCard">
    <el-dialog v-model="dialogFormVisible" title="修改信息">
      <el-form
        ref="ruleFormRef"
        :model="data"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="data.nickName" />
        </el-form-item>
        <el-form-item label="国家" prop="country">
          <el-input v-model="data.country" />
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-input v-model="data.province" />
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="data.city" />
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-select
            v-model="data.role"
            class="m-2"
            placeholder="Select"
            size="large"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="back">返回</el-button>
          <el-button type="primary" @click="submit"> 提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { ref, watch, reactive, toRaw } from "vue";
import { mainStore } from "../store/index";
import { useRouter } from "vue-router";
import request from "../axios/index";
import { ElMessage, ElMessageBox } from "element-plus";

interface UserInfo {
  nickName: string;
  country: string;
  province: string;
  city: string;
  role: string;
}

export default {
  name: "EditForm",
  setup(props, { emit }) {
    const store = mainStore();
    const data: any = reactive(toRaw(store.cacheData));
    //定义选项
    const options = [
      {
        value: "0",
        label: "访客",
      },
      {
        value: "1",
        label: "业主",
      },
      {
        value: "2",
        label: "租客",
      },
    ];
    const router = useRouter();

    const dialogFormVisible = ref(true);
    //返回上一级
    function back() {
      emit("reFresh", null);
      router.back();
    }

    //提交
    const submit = () => {
      ElMessageBox.confirm("是否确认提交信息")
        .then(() => {
          request
            .post("/admin/user/changeUserInfo", {
              userId: data.id,
              nickName: data.nickName,
              country: data.country,
              province: data.province,
              city: data.city,
              role: data.role,
            })
            .then((res) => {
              if (res.data.code === 200) {
                ElMessage({
                  message: res.data.message,
                  type: "success",
                });
                back();
              } else {
                ElMessage({
                  message: res.data.message,
                  type: "error",
                });
              }
            });
        })
        .catch((err) => {
          ElMessage("已取消修改信息");
        });
    };

    watch(
      () => dialogFormVisible.value,
      (newValue, oldValue) => {
        if (!newValue) {
          back();
        }
      }
    );

    return {
      data,
      options,
      dialogFormVisible,
      back,
      submit,
    };
  },
};
</script>

<style scoped>
.editCard {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #fff;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}

.el-dialog__body {
  padding-top: -10px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}
</style>